<template>
    <div>
        <el-tabs v-model="searchForm.tab" @tab-change="getData">
            <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabbars"
                :key="index"></el-tab-pane>
        </el-tabs>
        <el-card shadow="never" class="border-0">
            <!-- 搜索 -->
            <Search :model="searchForm"  @search="getData" @reset="resetSearchForm">
            <SearchItem label="关键词">
                <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
            </SearchItem>
            <template #show>
                <SearchItem label="商品分类">
                    <el-select v-model="searchForm.category_id" placeholder="请选择商品分类" clearable>
                        <el-option v-for="item in  categoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </SearchItem>
            </template>
        </Search>
            <!-- 新增、刷新 -->
            <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getData">
                <el-button size="small" class="mr-3" @click="handleMultiDelete" type="danger"
                    v-if="searchForm.tab != 'delete'">批量删除</el-button>
                <el-button size="small" class="mr-3" @click="handleRestoreGoods" type="warning"
                    v-if="searchForm.tab == 'delete'">恢复商品</el-button>
                <el-popconfirm v-if="searchForm.tab == 'delete'" title="是否要彻底删除商品？" confirm-button-text="确定" cancel-button-text="取消"
                    @confirm.stop="handleDestoryGoods">
                    <template #reference>
                        <el-button size="small" class="mr-3" type="danger">彻底删除</el-button>
                    </template>
                </el-popconfirm>
                <el-button size="small" class="mr-3" @click="handleMultiStatus(1)"
                    v-if="searchForm.tab == 'all' || searchForm.tab == 'off'">上架</el-button>
                <el-button size="small" @click="handleMultiStatus(0)"
                    v-if="searchForm.tab == 'all' || searchForm.tab == 'saling'">下架</el-button>
            </ListHeader>
            <el-table :data="tableData" ref="multipleTableRef" stripe style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="商品" width="300">
                    <template #default="{ row }">
                        <div class="flex">
                            <el-image class="mr-3 rounded" :src="row.cover" fit="cover" :lazy="true"
                                style="width:50px;height:50px"></el-image>
                            <div class="flex-1">
                                <p>{{ row.title }}</p>
                                <div>
                                    <span class="text-rose-500">￥{{ row.min_price }}</span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span class="text-gray-500 text-xs">￥{{ row.min_oprice }}</span>
                                </div>
                                <p class="text-gray-400 text-xs mb-1">分类：{{ row.category ? row.category.name : "未分类" }}
                                </p>
                                <p class="text-gray-400 text-xs ">创建时间：{{ row.create_time }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="实际销量" prop="sale_count" align="center" width="80" />
                <el-table-column label="商品状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.status ? 'success' : 'denger'">{{ row.status ? '上架' : '仓库' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" width="150" align="center" v-if="searchForm.tab !== 'delete'">
                    <template #default="{ row }">
                        <div v-if="row.ischeck == 0" class="flex flex-col">
                            <el-button type="success" size="small" plain @click="handleExamineGoods(row.id,1)">审核通过</el-button>
                            <el-button class="mt-2" type="danger" size="small" plain @click="handleExamineGoods(row.id,2)">审核拒绝</el-button>
                        </div>
                        <span v-else>{{ row.ischeck == 1 ? '通过' : '拒绝' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总库存" prop="stock" align="center" width="90" />
                <el-table-column label="操作" align="right">
                    <template #default="scope">
                        <div v-if="searchForm.tab !== 'delete'">
                            <el-button type="primary" size="samll" text @click="handleEdit(scope.row)">修改</el-button>
                            <el-button
                                :type="(scope.row.sku_type == 0 && !scope.row.sku_value) || (scope.row.sku_type == 1 && !scope.row.goods_skus.length) ? 'danger' : 'primary'"
                                size="samll" text @click="handelSetGoodsSkus(scope.row)"
                                :loading="scope.row.skusLoading">商品规格</el-button>
                            <el-button :type="scope.row.goods_banner.length == 0 ? 'danger' : 'primary'" size="samll"
                                text @click="handelSetGoodsBanners(scope.row)"
                                :loading="scope.row.bannersLoading">设置轮播图</el-button>
                            <el-button :type="scope.row.content ? 'primary' : 'danger'" size="samll" text
                                @click="handelSetGoodsContent(scope.row)"
                                :loading="scope.row.contentLoading">商品详情</el-button>
                            <el-popconfirm title="是否要删除商品？" confirm-button-text="确定" cancel-button-text="取消"
                                @confirm.stop="handleDelete([scope.row.id])">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                        <span v-else>暂无操作</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex items-center justify-center mt-5">
                <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                    :page-size="limit" @current-change="getData" />
            </div>
        </el-card>
        <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
                <el-form-item label="商品名称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="封面">
                    <ChooseImage v-model="form.cover" preview :limit="1" />
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="form.category_id" placeholder="请选择商品分类" clearable>
                        <el-option v-for="item in categoryList " :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="form.desc" placeholder="请输入商品描述" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
                </el-form-item>
                <el-form-item label="总库存">
                    <el-input v-model="form.stock" type="number" style="width:40%">
                        <template #append>件</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="库存预警">
                    <el-input v-model="form.min_stock" type="number" style="width:40%">
                        <template #append>件</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="最低销售价">
                    <el-input v-model="form.min_price" type="number" style="width:40%">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="最低原价">
                    <el-input v-model="form.min_oprice" type="number" style="width:40%">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="库存显示">
                    <el-radio-group v-model="form.stock_display">
                        <el-radio :label="0" border>隐藏</el-radio>
                        <el-radio :label="1" border>显示</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否上架">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="0" border>放入仓库</el-radio>
                        <el-radio :label="1" border>立即上架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </FormDrawer>

        <banners ref="bannersRef" @reloadData="getData" />
        <content ref="contentRef" @reloadData="getData" />
        <skus ref="skusRef" @reloadData="getData" />
    </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue"
import {
    getGoodsList, editGoodsStatus, deleteGoods, editGoods,
    createGoods, readGoods, setGoodsBanner, restoreGoods, destroyGoods,examineGoods
} from "~/api/goods.js"
import { getCategoryList } from "~/api/category.js"
import { toast } from "~/composables/util.js"
import FormDrawer from "~/components/FormDrawer.vue";
import ChooseImage from "~/components/image/ChooseImage.vue";
import ListHeader from "~/components/ListHeader.vue";
import content from "./content.vue";
import banners from "./banners.vue";
import skus from "./skus.vue";
import Search from "~/components/Search.vue"
import SearchItem from "~/components/SearchItem.vue"
import { useInitTab, useInitForm } from "~/composables/useCommon";

const { searchForm, resetSearchForm, tableData, loading, currentPage, total, limit, getData, handleStatusChange } = useInitTab({
    searchForm: {
        title: "",
        tab: "all",
        category_id: null
    },
    getList: getGoodsList,
    onGetListSuccess: (res) => {
        tableData.value = res.list.map((o) => {
            o.bannersLoading = false
            o.contentLoading = false
            o.skusLoading = false
            return o
        });
        total.value = res.totalCount;
    },
    updateStatus: editGoodsStatus
});

const { formDrawerRef, formRef, form, drawerTitle, rules, handleSubmit, handleCreate, handleEdit, handleDelete, multipleTableRef,
    handleSelectionChange,
    handleMultiDelete, handleMultiStatus, multiSelectionIds } = useInitForm({
        form: {
            title: null, //商品名称
            category_id: null, //商品分类
            cover: null, //商品封面
            desc: null, //商品描述
            unit: "件", //商品单位
            stock: 100, //总库存
            min_stock: 10, //库存预警
            status: 1, //是否上架 0仓库1上架
            stock_display: 1, //库存显示 0隐藏1禁用
            min_price: 0, //最低销售价
            min_oprice: 0 //最低原价
        },
        rules: {
            username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
            password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        },
        loading,
        getData,
        edit: editGoods,
        create: createGoods,
        delete: deleteGoods,
        editStatus: editGoodsStatus
    });

//all全部，checking审核中，saling出售中，off已下架，min_stock库存预警，delete回收站
const tabbars = [
    {
        key: "all",
        name: "全部"
    },
    {
        key: "checking",
        name: "审核中"
    },
    {
        key: "saling",
        name: "出售中"
    },
    {
        key: "off",
        name: "已下架"
    },
    {
        key: "min_stock",
        name: "库存预警"
    },
    {
        key: "delete",
        name: "回收站"
    },
]
//分类列表
const categoryList = ref([])
getCategoryList().then(res => categoryList.value = res)
console.log( categoryList);
const showSearch = ref(false)

//设置轮播图
const bannersRef = ref(null)
const handelSetGoodsBanners = (row) => {
    bannersRef.value.open(row)
}
//设置商品详细
const contentRef = ref(null)
const handelSetGoodsContent = (row) => {
    contentRef.value.open(row)
}
//设置商品规格
const skusRef = ref(null)
const handelSetGoodsSkus = (row) => {
    skusRef.value.open(row)
}
//批量恢复
const handleRestoreGoods = () => {
    useMultiAction(restoreGoods,"恢复商品")
}
//彻底删除
const handleDestoryGoods = () => {
    useMultiAction(destroyGoods,"删除商品")
}

function useMultiAction(func,msg){
    loading.value = true
    func(multiSelectionIds.value)
        .then(res => {
            toast(msg+"成功")
            //清空选中
            if (multipleTableRef.value) {
                multipleTableRef.value.clearSelection()
            }
            getData()
        }).finally(() => {
            loading.value = false
        })
}
const handleExamineGoods = (id,ischeck) => {
    loading.value = true
    console.log(id,ischeck);
    examineGoods(id,ischeck)
        .then(res => {
            toast("修改成功")
            getData()
        }).finally(() => {
            loading.value = false
        })
}   
</script>

<style>
.el-button+.el-button {
    margin-left: 0px;
}
</style>